<template>
	<view class="homeLayout pageBg">
		<custom-nav-bar title="推荐"></custom-nav-bar>

		<!-- 轮播图 -->
		<view class="banner">
			<swiper indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff" autoplay
				interval="3000">
				<swiper-item v-for="item in bannerList" :key="item._id">
					<navigator v-if="item.target == 'miniProgram'"
					 :url="item.url" target="miniProgram"
					 :app-id="item.appid"
					  class="link">
						<image :src="item.picurl" mode=""></image>
					</navigator>
					<navigator v-else :url="`/pages/classlist/classlist?${item.url}`" class="link">
						<image :src="item.picurl" mode=""></image>
					</navigator>
				</swiper-item>
			</swiper>
		</view>
		<!-- 公告 -->
		<view class="notice">
			<view class="left">
				<uni-icons type="sound-filled" size="30"></uni-icons>
				<text>公告</text>
			</view>
			<view class="center">
				<swiper autoplay vertical interval="2000">
					<swiper-item v-for="item in noticeList" :key="item._id">
						<navigator :url="`/pages/notice/detail?id=${item._id}`">
							{{ item.title }}
						</navigator>
					</swiper-item>
				</swiper>
			</view>
			<view class="right">
				<uni-icons type="forward" size="20" color="#696969"></uni-icons>
			</view>
		</view>

		<!-- 每日推荐 -->
		<view class="select">
			<common-title>
				<template #title>每日推荐</template>
				<template #custom class="selece-title">
					<uni-icons type="calendar" size="25"></uni-icons>
					<uni-dateformat :date="Date.now()" format="dd号"></uni-dateformat>
				</template>
			</common-title>
			<view class="content">
				<scroll-view scroll-x="true">
					<view v-for="item in randomList" :key="item._id" class="box" @click="goPre(item._id)">
						<image :src="item.smallPicurl" mode="aspectFill"></image>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 专题推荐 -->
		<view class="theme">
			<common-title>
				<template #title>
					专题精选
				</template>
				<template #custom>
					<navigator url="/pages/classify/classify" open-type="reLaunch" class="more" style="color: #696969;">
						More+</navigator>
				</template>
			</common-title>

		</view>
		<view class="theme-content">
			<theme-item v-for="item in themeList" :key="item._id" :item="item"></theme-item>
			<theme-item :isMore='true'></theme-item>
		</view>
	</view>


</template>

<script setup>
import { ref } from 'vue'
import { ApiGetBanner, ApiGetDay, ApiGetNotice, ApiGetClassify } from '@/api/apis.js'
import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
// 去详情页,需要携带 id 参数
const goPre = (id) => {
	uni.setStorageSync("classList", randomList.value)
	uni.navigateTo({
		url: '/pages/preview/preview?id=' + id,

	})

}
const bannerList = ref([])
const randomList = ref([])
const noticeList = ref([])
const themeList = ref([])

// 获取轮播图
const getBanner = async () => {
	const res = await ApiGetBanner()
	bannerList.value = res.data
	console.log('res.data',res.data)

}
// 获取每日推荐
const getRandom = async () => {
	const res = await ApiGetDay()
	randomList.value = res.data

}

// 获取新闻
const getNotice = async () => {
	const res = await ApiGetNotice({ select: true })
	console.log('res', res)
	noticeList.value = res.data
}
// 专题推荐
const getClassify = async () => {
	const res = await ApiGetClassify({ select: true })
	themeList.value = res.data
}

getBanner()
getRandom()
getNotice()
getClassify()
// 分享给好友
onShareAppMessage((e) => {
	return {
		title: '壁纸',
		path: '/pages/index/index',

	}
})
// 分享朋友圈
onShareTimeline((e) => {
	return {
		title: '壁纸'
	}
})
</script>

<style lang="scss">
.homeLayout {
	.banner {
		width: 750rpx;
		padding: 30rpx 0;

		swiper {
			width: 100%;
			height: 340rpx;

			&-item {
				width: 100%;
				height: 100%;
				padding: 0 30rpx;
				.link {
					width: 100%;
					height: 100%;
					image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
				}
				
			}
		}
	}

	.notice {
		height: 80rpx;
		background-color: #f9f9f9;
		display: flex;
		box-sizing: border-box;
		padding: 0 20rpx;
		margin: 0 30rpx;
		border-radius: 20rpx;
		line-height: 80rpx;

		.left {
			display: flex;
			justify-content: center;
			align-items: center;
			color: $base-theme-color;
			font-size: 28rpx;

			:deep() {
				.uni-icons {
					color: $base-theme-color !important;
				}
			}
		}

		.center {
			flex: 1;
			height: 100%;
			padding-left: 45rpx;
			color: #696969;

			swiper {
				height: 100%;

				&-item {
					height: 100%;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}


		}

		.right {
			width: 70rpx;
		}
	}

	.select,
	.theme {
		padding-top: 50rpx;

		.content {
			width: 720rpx;
			margin: 30rpx 0 0 30rpx;

			scroll-view {
				white-space: nowrap;

				.box {
					width: 200rpx;
					height: 430rpx;
					display: inline-block;
					margin-right: 15rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}

				.box:last-child {
					margin-right: 30rpx;
					;
				}
			}
		}
	}

	.select {
		.selece-title {
			display: flex;
			align-items: center;


		}

		:deep() {
			.uni-icons {
				color: $base-theme-color !important;
			}
		}
	}


	.theme-content {
		display: grid;
		padding: 0 30rpx 30rpx;
		margin-top: 30rpx;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(3, 1fr);
		gap: 15rpx;
	}

}
</style>